<template>
  <div class="note-item"
      @dblclick="handleContentDoubleClick">
    <el-input
      ref="inputRef"
      v-if="isEditing"
      v-model="new_title"
      @keyup.enter="handleKeyDown"
      @blur="handleBlur"
      class="input-overlay"
    />
    <p class="no-wrap" >
      {{ content.modelValue }}
    </p>
    <el-button @click="handleButtonClick('star')" :icon="Top" color="#73767a" circle :class="{ 'selected-button': content.is_star ,'noselect-button': !content.is_star}" />
    <el-button @click="handleButtonClick('delete')" :icon="Delete" color="#73767a" circle />
    <el-button @click="handleButtonClick('finish')" :icon="Check" circle />
    <!--<el-button @click="handleButtonClick('top')" :icon="Top" circle />-->
  </div>
</template>
t
<script setup lang="ts">
import {
  Star,
  Delete,
  Check,
  Top
} from '@element-plus/icons-vue'
import { ElButton } from 'element-plus';
import { ref, nextTick } from 'vue';
const content = defineProps(['modelValue','is_star']);
const emit  = defineEmits(['update:title','delete','star','finish','editing','top']);
const new_title = ref("");
const inputRef = ref<HTMLInputElement | null>(null);
function handleButtonClick(action: string) {
  if (action === "star") {
    console.log(content.is_star,"点击前是否star");
    // 处理收藏按钮点击逻辑
    emit('star')
  } else if (action === "delete") {
    // 处理删除按钮点击逻辑
    emit('delete')
  }else if (action === "finish") {
    // 处理完成按钮点击逻辑
    emit('finish')
  }
}
const isEditing = ref(false);
function handleContentDoubleClick() {
  
  emit('editing')
  new_title.value = content.modelValue;
  isEditing.value = true;
  nextTick(() => {
    if (inputRef.value !== null) {
      inputRef.value.focus();
    }
  });
}
function handleBlur() {
  // 如果编辑过内容则触发更新
  emit('update:title', new_title);
  isEditing.value = false;
}
function handleKeyDown(e: KeyboardEvent) {
  if (e.key === 'Escape' || e.key === 'Enter') {
    // 按下 Esc 或 Enter 键时触发 blur 事件，退出编辑状态,触发内容更新
    handleBlur();
  }
}
</script>


<style scoped>
.note-item {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #ddd;
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 5px;
}

.no-wrap {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.input-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
}

button {
  border: none;
  background: none;
  color: #999;
  cursor: pointer;
  padding: 0 5px;
  transition: color 0.3s ease;
  border-radius: 2px;
}

button:hover {
  color: #666;
}
.selected-button {
  background-color: rgb(157, 159, 162);
  color: #ffffff;
}
.noselect-button:focus {
  border: none;
  background: none;
  color: #999;
}
</style>